import mailPNG from "@/assets/mail.png";
import phonePNG from "@/assets/phone.png";

import styles from "./index.module.less";

const Contact = () => {
  return (
    <div className={styles["contact"]} style={{ minWidth: 950 }}>
      <div className={styles["title"]}>联系我们</div>

      <div style={{ margin: "0 auto", width: 500 }}>
        <div style={{ textAlign: "center", fontSize: 18 }}>
          百胜（中国）投资有限公司
        </div>
        <div className={styles["line"]}></div>
        <div
          style={{
            display: "flex",
            justifyContent: "space-between",
            alignContent: "center",
          }}
        >
          <div>
            <div style={{ marginBottom: 10, marginTop: 20, fontSize: 24 }}>
              邮箱地址
            </div>
            <div style={{ color: " #ab8f60" }}>
              China.CardCenter@YumChina.com
            </div>
          </div>
          <a href="mailto:China.CardCenter@YumChina.com">
            <img src={mailPNG} alt="" style={{ width: 90, height: 88 }} />
          </a>
        </div>
        <div className={styles["line"]}></div>
        <div
          style={{
            display: "flex",
            justifyContent: "space-between",
            alignContent: "center",
          }}
        >
          <div>
            <div style={{ marginBottom: 10, marginTop: 20, fontSize: 24 }}>
              联系电话
            </div>
            <div style={{ color: " #ab8f60" }}>4009-123-823</div>
          </div>
          <a href="tel:4009-123-823">
            <img src={phonePNG} alt="" style={{ width: 90, height: 88 }} />
          </a>
        </div>
        <div className={styles["line"]}></div>
        <div style={{ textAlign: "center", margin: 12, fontSize: 14 }}>
          工作时间：周一到周日9:00-19:00
        </div>
      </div>
    </div>
  );
};

export default Contact;
